<template>
    <div class="input_map">
        <my-input :id="id" isChange="Y" @input="changeInput"  class='myInputs' :data="data" :isRequired="isRequired"  :appid="appid"></my-input>
        <el-button type="primary" class="butttonSelect" @click="viewMap" >查看地图</el-button>
        <el-dialog
            title="路线规划"
            :visible.sync="dialogVisible"
            append-to-body
            style="height:70VH"
            width="80%">
            <div class='dialog_main'>
                <div class='dialog_left'>
                    <div class="searchAddress">
                       <el-input v-model="searchAddress" placeholder="起始地址"></el-input>
                        <el-button type="text" @click="searchMap">搜索</el-button>
                    </div>
                    
                    <baidu-map v-if="(showLx&&searchAddress2)" :style="{width:'100%',height:'62VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="searchAddress2"
                        :end="searchAddress3"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <bm-view class="map">
                        </bm-view>
                    </baidu-map>
                    <baidu-map v-else  :style="{width:'100%',height:'62VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="{lng:my.lng,lat:my.lat}"
                        :end="searchAddress3"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <bm-view class="map">
                        </bm-view>
                    </baidu-map>
                </div>
                <div class='dialog_right'>
                    <baidu-map  v-if="(showLx&&searchAddress2)"  :style="{width:'100%',height:'70VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="searchAddress2"
                        :end="{lng:endMarker.gcm_ex11,lat:endMarker.gcm_ex12}"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <!--bm-view class="map">
                        </bm-view-->
                    </baidu-map>
                    <baidu-map v-else :style="{width:'100%',height:'70VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="{lng:my.lng,lat:my.lat}"
                        :end="{lng:endMarker.gcm_ex11,lat:endMarker.gcm_ex12}"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <!--bm-view class="map">
                        </bm-view-->
                    </baidu-map>
                </div>

                    
                
                
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import myInput  from './myInput'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmLabel from 'vue-baidu-map/components/overlays/Label'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import BmPolyline from 'vue-baidu-map/components/overlays/Polyline'
import BmlLushu from 'vue-baidu-map/components/extra/Lushu'
import { BMPGL } from "@/utils/bmpgl.js"
import {BmDriving,BmView,BmGeolocation} from "vue-baidu-map";
export default {
    props:['exkey','extype','id','label','data','appid','dataField','isRequired'],
    components:{
        myInput,
        BmLabel,
        BaiduMap,
        BmScale,
        BmNavigation,
        BmMarkerClusterer,
        BmMarker,
        BmInfoWindow,
        BmPolyline,
        BmlLushu,
        BmDriving,
        BmView,
        BmGeolocation
    },
    data(){
        return{
            dialogVisible:false,
            searchAddress:"",
            searchAddress2:"",
            showLx:true,
            my:{
                lng:"",
                lat:""
            },
            endMarker:{},
            searchAddress3:""
        }
    },
    create(){
        let ids=this.id.split(".");
        let pId=ids[0];
        let cId=ids[1]
        this.searchAddress3=this.data[pId][cId];
    },
    methods:{
        viewMap(){
            this.dialogVisible=true;
        },
        searchMap(){
            this.showLx=false;
            this.searchAddress2=this.searchAddress
            this.showLx=true;
        },
        handler2 ({BMap, map}) {
            console.log(BMap, map)
            // this.map.center.lng = 118.802422
            // this.map.center.lat = 32.065631
            // this.map.zoom = 12;
            
            let that=this;
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                console.log(r);
                that.my.lng=r.longitude;
                that.my.lat=r.latitude
                
            },{enableHighAccuracy: true})
            // this.getProPositionMap();
        },
        changeInput(item){
            item=JSON.parse(item);
            this.searchAddress3=item.val;
           // alert(this.searchAddress3)
        }
    }
}
</script>
<style scoped>
.input_map{
    display:flex;
    flex-direction: row;
    width:100%;
    overflow: hidden;
}
.myInputs{
    flex:1;
}

.dialog_main{
    display: flex;
    flex-direction: row;
}
.dialog_right{
    flex:1;
}
.dialog_left{
    width:200px;
    overflow:auto;
}
.dialog_left_item{
    padding:5px;
    border-bottom:1px solid #ddd;
    cursor:pointer;
}
.dialog_left_item:hover{
    background:#3687e1;
    color:#fff;
}
.dialog_left_active{
    background:#3687e1;
    color:#fff;
}
</style>
